<html>
	<head>
		<meta charset="UTF-8">

		<title>登录</title>
		<link rel="shortcut icon" type="image/png" href="images/favicon.ico">
		<link rel="stylesheet" href="js/layui/css/layui.css">
		<link rel="stylesheet" href="css/style.css">
		<script src="js/layui/layui.js"></script>
	</head>
	<body>
		<div id="VIEW-login">
			<div class="login-wrap">
				<div class="layui-container">
					<div class="layui-row">
						<div class="layui-col-xs12 layui-col-lg4 layui-col-lg-offset4 nepadmin-tc">
							<div class="layui-logo"><span>On<b>eS</b>tation</span></div>
						</div>
						<div class="layui-col-xs12 layui-col-lg4 layui-col-lg-offset4">
							<div id="loginform" class="layui-form" lay-filter="login-form">
								<div class="normal-login-form">
									<div class="layui-form-item">
										<label class="layui-icon label-icon layui-icon-username"></label>
										<input type="text" name="username" value=""  required lay-verify="required" placeholder="账号"
										 maxlength="11" autocomplete="off" class="layui-input">
									</div>
									<div class="layui-form-item password-block">
										<label class="layui-icon label-icon layui-icon-password"></label>
										<input type="password" name="password" value="" required lay-verify="required" placeholder="密码"
										 autocomplete="off" class="layui-input">
									</div>

									<!-- <div class="layui-form-item">
										<input type="checkbox" name="autoLogin" title="下次自动登录" lay-skin="primary" checked>
									</div> -->
									<div class="layui-form-item">
										<button class="layui-btn layui-btn-normal layui-btn-fluid" lay-submit lay-filter="login-submit">
											<i style="display: none" class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i>
											立即登录
										</button>
									</div>
									<div class="layui-form-item">
										<a onclick='signup()'>注册账号</a>
										&nbsp;&nbsp;
										<a style="margin-right:10px;" onclick='forget()'>忘记密码？</a>
									</div>
								</div>
							</div>
							<!-- 注册 -->
							<div id="registerform" class="layui-form nodisplay" lay-filter="register-form">
								<div class="normal-login-form">
									<div class="layui-form-item">
										<label class="layui-icon label-icon layui-icon-username"></label>
										<input type="text" name="username" value=""  required lay-verify="required" placeholder="账号"
										 maxlength="11" autocomplete="off" class="layui-input">
									</div>
									<div class="layui-form-item password-block">
										<label class="layui-icon label-icon layui-icon-password"></label>
										<input id="pwd" type="password" name="password" value="" lay-verify="password" required  lay-verify="required" placeholder="密码"
										 autocomplete="off" class="layui-input">
									</div>
									<div class="layui-form-item password-block">
										<label class="layui-icon label-icon layui-icon-password"></label>
										<input type="password" name="confirmpassword" value="" lay-verify="confirmpass" required  lay-verify="required" placeholder="确认密码"
										 autocomplete="off" class="layui-input">
									</div>
									<div class="layui-form-item">
										<button class="layui-btn layui-btn-normal layui-btn-fluid" lay-submit lay-filter="register-submit">
											<i style="display: none" class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i>
											立即注册
										</button>
									</div>
									<div class="layui-form-item">
										<a onclick='signin()'>已有账号，立即登录？</a>
									</div>
								</div>
							</div>
							<!-- 注册 -->
						</div>
					</div>
				</div>
			</div>
		</div>

		<script type="text/javascript">
			// 当前页页相关JS操作请直接写到这里便于维护
			layui.use(['layer', 'form', 'element'], function () {
				var $ = layui.$,	//$为jquery模块
					layer = layui.layer,
					form = layui.form;

				//自定义验证规则
				form.verify({
					confirmpass: function (value) {
						var pwd = $("#pwd").val();
						if (!new RegExp(pwd).test(value)) {
							return '两次输入的密码不一致';
						}
					}
					, password: [
						/^[\S]{6,12}$/
						, '密码必须6到12位，且不能出现空格'
					]
				});

				form.on('submit(login-submit)', function (data) {
					$.ajax({
						url: "/api/user/signin",
						data: data.field,
						type: "POST",
						success: function (response) {
							if (response.code == 302) {
								location.href = response.msg;
							} else {
								layer.alert(response.msg, { icon: 1 });

							}
						},
						error: function (XMLHttpRequest, textStatus, errorThrown) {
							layer.msg("XMLHttpRequest:" + XMLHttpRequest + "<br>textStatus:" + textStatus + "<br>errorThrown:" + errorThrown, {
								icon: 2,
								title: '系统错误',
							});
						}
					});
					return false;	//禁用表单默认提交方式,重要!!
				});


				form.on('submit(register-submit)', function (data) {
					$.ajax({
						url: "/api/user/signup",
						data: data.field,
						type: "POST",
						success: function (response) {
							if (200 == response.code) {
								layer.alert(response.msg, { icon: 1 });
							}else{
								layer.alert(response.msg, { icon: 2 });
							}
						},
						error: function (XMLHttpRequest, textStatus, errorThrown) {
							layer.msg("XMLHttpRequest:" + XMLHttpRequest + "<br>textStatus:" + textStatus + "<br>errorThrown:" + errorThrown, {
								icon: 2,
								title: '系统错误',
							});
						}
					});
					return false;	//禁用表单默认提交方式,重要!!
				});
			});
			function signin() {
				layui.$("#registerform").addClass('nodisplay')
				layui.$("#loginform").removeClass('nodisplay')
			}
			function signup() {
				layui.$("#loginform").addClass('nodisplay')
				layui.$("#registerform").removeClass('nodisplay')
			};
			function forget() {
				layer.alert('当前功能暂未开放！');
			};

		</script>
	<script src="js/index.js"></script>

	</body>
</html>
